<script setup lang="ts">
import { ElCard, ElTooltip, ElScrollbar } from 'element-plus'
import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'
import { ref, onMounted, onBeforeUnmount, watchEffect } from 'vue'

const { getPrefixCls } = useDesign()

const headerRef = ref(null)

const prefixCls = getPrefixCls('content-wrap')

const headerHeightRef = ref(0)

const calcHeaderHeight = () => {
  if (headerRef.value) {
    headerHeightRef.value = headerRef.value.offsetHeight * 4
  }
}

onMounted(() => {
  calcHeaderHeight()
  window.addEventListener('resize', calcHeaderHeight)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', calcHeaderHeight)
})

watchEffect(() => {
  calcHeaderHeight()
})

defineProps({
  title: propTypes.string.def(''),
  message: propTypes.string.def(''),
  loading: propTypes.bool.def(false)
})
</script>
<template>
  <ElCard :class="[prefixCls]" shadow="never" v-loading="loading" style="height: calc(100vh - 180px)">
    <template v-if="title" #header>
      <div ref="headerRef" class="flex items-center">
        <span class="text-16px font-700">{{ title }}</span>
        <ElTooltip v-if="message" effect="dark" placement="right">
          <template #content>
            <div class="max-w-200px">{{ message }}</div>
          </template>
          <Icon class="ml-5px" icon="bi:question-circle-fill" :size="14" />
        </ElTooltip>
      </div>
    </template>
    <el-scrollbar :height="'calc(100vh - 180px - ' + headerHeightRef + 'px)'">
      <slot></slot>
    </el-scrollbar>
  </ElCard>
</template>

<style scoped></style>
